<template>
    <div>
        <!-- 表格部分 -->
        <el-card style="margin-top:10px">
            <div style="margin-bottom:5px">
                <el-button type="primary" plain size="small" @click="onAdd"><el-icon><Plus /></el-icon>添加</el-button>
                <el-button type="danger" plain size="small" :disabled="multiple"><el-icon><DeleteFilled /></el-icon>删除</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" :selectable="selectable" width="50" />
                <el-table-column prop="id" label="ID" />
                <el-table-column prop="modelName" label="模型名称" />
                <el-table-column prop="ColumnTemplatePrefix" label="栏目模板前缀" />
                <el-table-column prop="ContentTemplatePrefix" label="内容模板前缀" />
                <el-table-column label="操作选项" width="300px">
                    <template #default="{row}">
                        <el-button link plain type="primary" size="small" @click="onEdit(row)"><el-icon><Edit /></el-icon>修改</el-button>
                        <el-button link plain type="primary" size="small" @click="toColumnModel(row)"><el-icon><Tickets /></el-icon>栏目模型</el-button>
                        <el-button link plain type="primary" size="small" @click="toContentModel(row)" :disabled="!row.ContentTemplatePrefix"><el-icon><Notebook /></el-icon>内容模型</el-button>
                        <el-button link plain type="primary" size="small" @click="onRevocation(row)"><el-icon><Delete /></el-icon>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
            />
        </el-card>
        <el-dialog
            v-model="addDialogVisible"
            :title="title"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            @close="onReset(addRuleFormRef)"
            width="45%"
        >
            <el-form
                ref="addRuleFormRef"
                style="min-width: 500px"
                :model="addRuleForm"
                :rules="addRules"
                label-width="120"
                class="demo-ruleForm"
                status-icon
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="模型ID" prop="modelID" name="modelID" required>
                            <el-input v-model="addRuleForm.modelID" placeholder="请输入模型ID" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="模型名称" prop="modelName" name="modelName" required>
                            <el-input v-model="addRuleForm.modelName" placeholder="请输入模型名称" clearable/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="栏目模板前缀" prop="ColumnTemplatePrefix" name="ColumnTemplatePrefix" required>
                            <el-input v-model="addRuleForm.ColumnTemplatePrefix" placeholder="请输入栏目模板前缀" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="内容模板前缀" prop="ContentTemplatePrefix" name="ContentTemplatePrefix">
                            <el-input v-model="addRuleForm.ContentTemplatePrefix" placeholder="请输入内容模板前缀" clearable/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                      <el-form-item label="内容模板前缀" prop="isContent" name="isContent" required>
                        <el-radio-group v-model="addRuleForm.isContent">
                            <el-radio :value="0">否</el-radio>
                            <el-radio :value="1">是</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="onReset(addRuleFormRef)">重 置</el-button>
                <el-button type="primary" @click="onSubmit(addRuleFormRef)">提 交</el-button>
            </div>
            </template>
        </el-dialog>
    </div>
</template>

<script  setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()

const ids = ref([])
const multiple = ref(true)
const addRuleFormRef = ref()
const addDialogVisible = ref(false)
const total = ref(50)
const title = ref()
const selectable = ref()

// 添加表单的内容
const addRuleForm = ref({
    modelID: '',
    modelName: '',
    ColumnTemplatePrefix: '',
    ContentTemplatePrefix: '',
    isContent: null
})

const tableData = [
    {
        id: '1',
        modelName: '新闻(1)',
        ColumnTemplatePrefix: '新闻栏目',
        ContentTemplatePrefix: '新闻内容'
    },
    {
        id: '2',
        modelName: '单页(2)',
        ColumnTemplatePrefix: '单页',
        ContentTemplatePrefix: ''
    },
    {
        id: '3',
        modelName: '作品(3)',
        ColumnTemplatePrefix: '作品栏目',
        ContentTemplatePrefix: '作品内容'
    },
    {
        id: '4',
        modelName: '单页_公司领导(dygsld)',
        ColumnTemplatePrefix: '单页',
        ContentTemplatePrefix: ''
    },
    {
        id: '5',
        modelName: '一般产品(7)',
        ColumnTemplatePrefix: '产品',
        ContentTemplatePrefix: '产品'
    },
    {
        id: '6',
        modelName: '单页_机构网点明细(dyjgwdmx)',
        ColumnTemplatePrefix: '单页',
        ContentTemplatePrefix: ''
    }
]

// 校验规则
const addRules = reactive({
    modelID: [
        { required: true, message: '请输入模型ID', trigger: 'blur' }
    ],
    modelName: [
        { required: true, message: '请输入模型名称', trigger: 'blur' }
    ],
    ColumnTemplatePrefix: [
        { required: true, message: '请输入栏目模板前缀', trigger: 'blur' }
    ],
    isContent: [
        { required: true, message: '请选择是否有内容', trigger: 'change' }
    ]
})

const queryParams = ref({
        pageNum: 1,
        pageSize: 10
})

const getList = () => {
    console.log('getList', queryParams.value)
}

// 添加
const onAdd = () => {
  addDialogVisible.value = true
}
// 修改
const onEdit = (row) => {
    title.value = '修改'
    addDialogVisible.value = true
}

// 删除
const onRevocation = () => {
    ElMessageBox.confirm(
    '您确定要删除这条数据吗？',
    '系统提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
    .then(() => {
        ElMessage({
        type: 'success',
        message: 'Delete completed'
        })
    })
    .catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除'
        })
    })
}

const toColumnModel = (row) => {
  router.push({ name: 'ColumnModel', query: { id: row.id } })
}

const toContentModel = (row) => {
  router.push({ path: 'ContentModel', query: { id: row.id } })
}

// 提交
const onSubmit = async(formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
        console.log('submit!')
        addDialogVisible.value = false
        } else {
        console.log('error submit!', fields)
        }
    })
}
// 重置
const onReset = (formEl) => {
    addRuleForm.value = {
        modelID: '',
        modelName: '',
        ColumnTemplatePrefix: '',
        ContentTemplatePrefix: '',
        isContent: null
    }
    formEl.resetFields()
}

const handleSelectionChange = (selection) => {
    ids.value = selection.map(item => item.date)
    multiple.value = !selection.length
}
</script>

<style lang="scss" scoped>
::v-deep{
    .el-table {
    .el-table__header-wrapper{
        th {
        word-break: break-word;
        background-color: #f8f8f9 !important;
        color: #515a6e;
        height: 40px !important;
        font-size: 13px;
        }
    }
    }
}
::v-deep{
    .el-form {
    .el-form-item{
        .el-form-item__label {
            font-weight: bold !important;
        }
    }
    }
}

::v-deep{
    .el-form {
    .el-form-item .second_label{
        .el-form-item__label {
            font-weight: normal !important;
            margin-top: 10px;
        }
    }
    }
}
::v-deep{
.second_label{
        .el-form-item__error {
            position: static !important
        }

    }
}

::v-deep{
    .tree-border {
        margin-top: 5px;
        border: 1px solid #e5e6e7;
        background: #fff none;
        border-radius:4px;
        width: 100%;
    }
}

</style>
